<template>
  <div
    class="ele-goods-item"
    v-if="food"
    :class="[border ? 'ele-bottom-border' : '']"
  >
    <div class="ele-goods-img">
      <img :src="food.image" alt="Img" @load="load" />
    </div>
    <div class="ele-goods-content">
      <h1>{{ food.name }}</h1>
      <div class="ele-goods-desc">
        {{ food.description }}
      </div>
      <div class="ele-sell-item">
        <span class="ele-sell-count">月售{{ food.sellCount }}份</span>
        <span class="ele-sell-rating">好评率{{ food.rating }}%</span>
      </div>
      <div class="ele-goods-price">
        <span class="ele-price-text"
          ><span class="money-char">￥</span>{{ food.price }}</span
        >
        <del class="ele-proce-oldText" v-if="food.oldPrice"
          >￥{{ food.oldPrice }}</del
        >
      </div>
    </div>
    <div class="btn-select-item">
      <div class="ele-select-btn iconfont eletianjia" @click="addClick"></div>
      <transition name="count">
        <div class="select-count" v-if="Count != 0">
          <span>{{ Count }}</span>
        </div>
      </transition>
      <transition name="close">
        <div
          class="ele-jian-btn iconfont elejian"
          @click="reduceClick"
          v-if="Count != 0"
        ></div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  props: {
    food: {},
    scroll: undefined,
    border: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    ...mapActions(["changeOrderlist"]),
    load() {
      // 刷新betterScroll
      if (this.scroll) {
        this.scroll.refresh();
      }
    },
    // 添加商品
    addClick(e) {
      e.stopPropagation();
      this.Count += 1;
      this.$emit("addShop", this.food);
    },
    // 减商品个数
    reduceClick(e) {
      e.stopPropagation();
      this.Count -= 1;
    },
  },
  computed: {
    ...mapGetters(["getOrderList"]),
    Count: {
      get() {
        let _res = {};
        // 计算出count
        this.getOrderList.forEach((Item) => {
          Item.name === this.food.name ? (_res = Item) : "";
        });
        return _res.count || 0;
      },
      // 赋值时进行的操作
      set(count) {
        let { food } = this;
        this.changeOrderlist({
          name: food.name,
          singlePrice: food.price,
          count: count,
        });
      },
    },
  },
};
</script>

<style>
.ele-goods-item {
  display: flex;
  margin: 0 18px;
  padding: 18px 0;
  position: relative;
}

.ele-bottom-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: rgb(147, 153, 159);
  transform: scaleY(0.3);
}
.ele-shop-item {
  display: flex;
  padding: 18px 18px;
}
.ele-goods-img {
  height: 64px;
  flex: 0 0 64px;
  border-radius: 2px;
  overflow: hidden;
}
.ele-goods-img img {
  width: 100%;
  height: 100%;
}
.ele-goods-content {
  margin-left: 10px;
}
.ele-goods-content {
  font-size: 14px;
  color: rgba(7, 17, 27, 1);
  line-height: 14px;
}
.ele-goods-desc {
  margin: 8px 0;
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ele-sell-rating {
  margin-left: 12px;
}
.ele-sell-item {
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 10px;
}
.ele-goods-price del {
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 10px;
}
.ele-price-text {
  color: red;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}
.money-char {
  font-weight: normal;
  font-size: 10px;
  font-family: unset;
}
.btn-select-item {
  position: absolute;
  right: 0;
  bottom: 18px;
}
.ele-select-btn {
  display: inline-block;
  bottom: 18px;
  height: 24px;
  width: 24px;
  font-size: 24px;
  color: white;
  border-radius: 50%;
  text-align: center;
  background-color: #00a0dc;
}
/* .run-btn{
  display: inline-block;
  bottom: 18px;
  height: 24px;
  width: 24px;
  font-size: 24px;
  color: white;
  border-radius: 50%;
  text-align: center;
  background-color: #00a0dc;
} */
.ele-jian-btn {
  width: 24px;
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  color: #00a0dc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00a0dc;
  background-color: white;
  position: absolute;
  bottom: 0;
  right: 48px;
}
.select-count {
  position: absolute;
  bottom: 0;
  right: 24px;
  width: 24px;
  height: 24px;
  font-size: 10px;
  line-height: 24px;
  color: rgb(147, 153, 159);
  text-align: center;
}
.close-enter-active,
.close-leave-active {
  transition: all 0.2s linear;
}
.close-enter,
.close-leave-to {
  transform: translateX(30px) rotate(360deg);
  opacity: 0;

}

.count-enter-active,
.count-leave-active {
  transition: all 0.2s linear;
}
.count-enter,
.count-leave-to {
  opacity: 0;
  z-index: -1;
}
</style>
